<template>
  <el-dialog
    v-model="dialogVisible"
    title="删除宠物信息"
    width="30%"
    :before-close="handleClose"
  >
    <span style="font-size: 16px">确定要删除该条宠物信息吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDelete">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};

const petId = ref<number | string>();
const emits = defineEmits(["getPetDataList"]);
import { ElMessageBox, ElMessage } from "element-plus";
import { deletePet } from "@/api/owner";
const handleDelete = () => {
  ElMessageBox.confirm("确定删除吗?")
    .then(async () => {
      dialogVisible.value = false;
      await deletePet(petId.value!).then((res: any) => {
        ElMessage({
          message: res.message,
          type: "success",
        });
      });
      emits("getPetDataList");
    })
    .catch(() => {
      alert("错误啦!");
      dialogVisible.value = false;
    });
};
const showDialog = (id: number | string) => {
  petId.value = id;
  dialogVisible.value = true;
};

defineExpose({
  showDialog,
});
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
